<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>post请求练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 1000px;
            margin: 50px auto;
        }
        .item{
            width:25%;
            float:left;
            padding: 0 15px;
            margin-bottom: 15px;
            height: 163px;
        }

        .item img{
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- post   http://api.xiaohigh.com:8090/bili-zhibo -->
    <div class="container">
        <h2>bilibili 直播列表</h2>
        <hr>
        <div class="zhibo-list">
            <!-- <div class="item">
                <img src="https://i0.hdslb.com/bfs/live/new_room_cover/d00a210fee29071e61e9ed10d3ed789187b5d64a.jpg" alt="">
                <h4>劫一下</h4>
            </div> -->
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script>
        //函数
        (async function(){
            //获取元素
            let zhibo = document.querySelector(".zhibo-list");
            //发送请求
            let result = await axios.post('http://127.0.0.1:8090/bili-zhibo');
            //获取直播数据
            let data = result.data.data.data;
            //遍历
            data.forEach(item => {
                //创建元素
                let div = document.createElement('div');
                div.className = 'item';
                //创建img
                let img = document.createElement('img');
                img.src = item.cover;
                //创建 h4
                let h4 = document.createElement('h4');
                
                //创建a 标签
                let a = document.createElement('a');
                a.href = 'https://live.bilibili.com' + item.link;
                a.innerHTML = item.title;
                //组装
                div.appendChild(img);
                h4.appendChild(a);
                div.appendChild(h4);
                zhibo.appendChild(div);
            })
        })()
    </script>
</body>
</html>